<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html>
<head>
    <title>预约统计</title>
    <meta name="decorator" content="default"/>
    <link href="${ctxStatic}/static_back/css/public.css" type="text/css" rel="stylesheet">
    <link href="${ctxStatic}/static_back/css/main.css" type="text/css" rel="stylesheet">
    <script src="${ctxStatic}/echars/echarts.js"></script>
    <script src="${ctxStatic}/jquery/jquery-1.9.1.js"></script>
</head>
<body>
    <%--标题--%>
    <div class="top-section">
        <h2>预约统计</h2>
    </div>

    <div class="body-section chart-body">
        <input id="options" type="hidden" value="${options}"/>
        <div class="chart-left">
            <select id="bookingDate" onchange="bookingDate()">
                <option value="2018-11-09" >11月9日</option>
                <option value="2018-11-10" >11月10日</option>
                <option value="2018-11-11" >11月11日</option>
                <option value="all">11月9、10、11日</option>
            </select>
            <div class="chart-title">
                <h3>合计</h3>
                <span><em id="total"></em>人</span>
            </div>
            <div class="chart-data-list">
                <ul class="scroll-box">
                    <c:forEach items="${map}" var="airSum" varStatus="status" >
                    <li>
                        <span>${airSum.key.route} ${airSum.key.name}</span>
                        <em>${airSum.value}</em>
                    </li>
                    </c:forEach>
                </ul>
            </div>
        </div>
        <div class="chart-right">
            <div class="chart-box" id="mainChart">
            </div>
        </div>
    </div>


    <script type="text/javascript">
        $(function () {
            var date = "${bookingDate}";
            console.log(date);
            $("#bookingDate").find("option[value = '"+date+"']").attr("selected","selected");
            setInterval(function () {
                bookingDate();
            },1000*60);
        })
        function bookingDate() {
            var date = $("#bookingDate").find("option:selected").val();
            var url = "${ctx}/air/bookingStatistics/index?bookingDate="+date;
            <%--console.log(test);--%>
            window.location.href=url;
        }
        var myChart = echarts.init(document.getElementById('mainChart'));

        //初始化数据
        var pointsName = eval("(" + '${pointNames}' + ")");
        var counts = eval("(" + '${counts}' + ")");
        var counts2 = eval("(" + '${arriveCounts}' + ")");
        var total = 0;
        for(var c in counts){
            total += counts[c];
        }
        $('#total').html(total);
        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                    shadowStyle:{
                        color:"#1b5df7",
                        opacity: 0.06
                    }
                },
                formatter: function(a){
                    var tipHtml= '<div class="chart-tip"><h5>'+ a[0].axisValue +'</h5>';
                    tipHtml += '<p>'+ $("#bookingDate").find("option:selected").text() +' </p>';
                    for (var i = 0; i < a.length; i++) {
                        tipHtml += '<p><em style="background:'+ a[i].color +'"></em>'+ a[i].seriesName +'： '+ a[i].value +' 人</p>';
                    }
                    tipHtml += '</div>';
                    return tipHtml
                },
                backgroundColor: 'transparent',
                padding: 0
            },
            legend: {
                top: 20,
                textStyle:{
                    color: '#808080',
                    fontSize: 14
                },
                data: ['预约人数', '已运送人数']
            },
            grid: {
                left: 24,
                right: 80,
                bottom: 20,
                top: 70,
                containLabel: true
            },
            xAxis: {
                type: 'value',
                name:'人数',
                axisLine: {
                    show: true,
                    lineStyle:{
                        color: '#dadada'
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle:{
                        color: '#e4e7ea',
                        type: 'dashed'
                    }
                },
                axisTick: {
                    show: false
                },
                axisLabel:{
                    fontSize: 13,
                    color: '#808080'
                },
                nameTextStyle: {
                    fontSize: 12,
                    color: '#bcbcbc'
                }
            },
            yAxis: {
                type: 'category',
                name:'乘车点',
                data: pointsName,
                splitLine: {
                    show: false
                },
                axisLine: {
                    show: true,
                    lineStyle:{
                        color: '#dadada'
                    }
                },
                axisTick: {
                    show: false
                },
                axisLabel:{
                    fontSize: 13,
                    color: '#808080'
                },
                nameTextStyle: {
                    fontSize: 12,
                    color: '#bcbcbc'
                }
            },
            series: [
                {
                    name: '预约人数',
                    type: 'bar',
                    data: counts,
                    barWidth: 10,
                    smooth: true,
                    itemStyle:{
                        color:'#1c9ae3',
                        barBorderRadius: [0,10,10,0]
                    },
                    label: {
                        normal: {
                            show: true,
                            position: 'right',
                            textStyle: {
                                color: '#cccccc',
                                fontSize: 12
                            }
                        }
                    }
                },
                {
                    name: '已运送人数',
                    type: 'bar',
                    data: counts2,
                    barWidth: 13,
                    itemStyle:{
                        color:'#15cd9b',
                        barBorderRadius: [0,10,10,0]
                    },
                    label: {
                        normal: {
                            show: true,
                            position: 'right',
                            textStyle: {
                                color: '#cccccc',
                                fontSize: 12
                            }
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);
        window.onresize = function(){
            myChart.resize();
        }
    </script>
</body>
</html>
